@import "./common/mixin.scss";
@import "./common/vars.scss";
@import "./common/utils.scss";

@include module(message) {
  width: 60%;
  padding: 15px 20px;
  box-sizing: border-box;
  line-height: 14px;
  font-size: 14px;
  color: #333;
  background: mix($--color-white, $--color-info, 80%);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s ease;
  line-height: 1.5;
  top: 20px;
  z-index: 1001;
  @include modifier(success) {
    background: mix($--color-white, $--color-success, 85%);
    color: $--color-success;
    border: solid 1px mix($--color-white, $--color-success, 75%);
  }
  @include modifier(warning) {
    background: mix($--color-white, $--color-warning, 85%);
    color: $--color-warning;
    border: solid 1px mix($--color-white, $--color-warning, 75%);
  }
  @include modifier(error) {
    background: mix($--color-white, $--color-danger, 85%);
    color: $--color-danger;
    border: solid 1px mix($--color-white, $--color-danger, 75%);
  }
  & > i {
    margin-right: 10px;
  }
}
